<template>
    <div class="ArticleSave"  v-loading="loading"  element-loading-text="拼命加载中">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>markdown编辑器</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="plugins-tips">
                mavonEditor：基于Vue的markdown编辑器。
                访问地址：<a href="https://github.com/hinesboy/mavonEditor" target="_blank">mavonEditor</a>
            </div>
            <mavon-editor v-model="article.content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/>
            <el-form ref="form" :model="article" label-width="100px" class="article-info">
              <el-form-item label="标题">
                <el-input v-model="article.title"></el-input>
              </el-form-item>
              <el-form-item label="英文标题">
                <el-input v-model="article.enTitle"></el-input>
              </el-form-item>
              <el-form-item label="分类">
                <el-select v-model="article.classId">
                    <el-option v-for="item in articleClassList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="简述">
                <el-input type="textarea" v-model="article.brief" placeholder="列表中显示的部分内容"></el-input>
              </el-form-item>
              <el-form-item label="标签">
                <el-input v-model="article.tag" placeholder="多个标签请使用逗号（，）隔开"></el-input>
              </el-form-item>
              <el-form-item label="作者">
                <el-input v-model="article.author"></el-input>
              </el-form-item>
              <el-form-item label="">
                <!-- <el-switch v-model="article.original"></el-switch> -->
                <el-switch
                  v-model="article.isOriginal"
                  active-text="原创"
                  inactive-text="转载">
                </el-switch>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submit">发布</el-button>
              </el-form-item>
            </el-form>
            <!-- <el-button class="editor-btn" type="primary" @click="submit">提交</el-button> -->
        </div>
    </div>
</template>

<script>
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    export default {
        name: 'articleSave',
        props : [
            'enTitle',
            'saveType'
        ],
        data: function(){
            return {
                loading: false,
                article: {
                   
                },
                articleClassList: [],
                content:'## 二级标题',
                html:'',
                configs: {
                }
            }
        },
        components: {
            mavonEditor
        },
        mounted: function () {
            this.getArticleClass()
            if(this.saveType === 'edit') {
                this.getArticle()
            }
        },
        methods: {
            // 将图片上传到服务器，返回地址替换到md中
            $imgAdd(pos, $file){
                var formdata = new FormData();
                formdata.append('file', $file);
                // 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口
                this.$axios({
                    url: '/common/upload',
                    method: 'post',
                    data: formdata,
                    headers: { 'Content-Type': 'multipart/form-data' },
                }).then((url) => {
                    this.$refs.md.$img2Url(pos, url);
                })
            },
            change(value, render){
                // render 为 markdown 解析后的结果
                this.html = render;
            },
            submit(){
                let that = this
                console.log(that.article);
                console.log(that.html);
                that.loading = true
                that.$axios.post('/article/save', that.article).then((response) => {
                    if (response.data.success) {
                    that.$message({
                        message: '保存成功',
                        type: 'success'
                    })
                    that.$emit('saveSuccess')
                    }else {
                        that.$message.error(response.data.message)
                    }
                })
                 .catch(function (error) {
                   that.$message.error('请求失败，服务器异常')
                })
                that.loading = false
            },
            getArticle(){
                let that = this
                that.loading = true
                that.$axios.get('/article/detail?enTitle=' + that.enTitle).then(response => {
                        that.article = response.data.model
                        that.loading = false
                })
            },
            getArticleClass() {
                this.$axios.get('/article/class/list').then((res) => {
                    this.articleClassList = res.data.model
                })
            },
        }
    }
</script>
<style scoped>
    .article-info{
        margin-top: 20px;
    }
    .editor-btn{
        margin-top: 20px;
    }
</style>